<template>
  <div class="category">
    <navBar title="商品分类" />

    <div class="content">
      <!-- Sidebar 侧边导航 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
        v-for="item in categoryList"
        :key="item.id"
        :title="item.cateName" />
      </van-sidebar>

      <!-- 商品分类导航 -->
      <div class="navBox">
        <van-grid :border="false" square :column-num="3">
          <van-grid-item
          v-for="item in categoryItem"
          :key="item.id"
          @click="toProduct(item.id)"
          :text="item.cateName">
            <template #icon>
              <van-image
                class="navImg"
                :src="item.pic"
              />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 底部分割线 -->
    <!-- <isNull /> -->
  </div>
</template>

<script>
import {
  getCategory,
} from '@/api/category'

export default {
  data() {
    return {
      activeKey: 0,
      categoryList: [], // 分类列表
    }
  },
  created() {
    this.getCategory()
  },
  methods: {
    // 获取商品分类
    async getCategory() {
      const { data } = await getCategory()
      // console.log(data);
      this.categoryList = data || []
    },

    // 商品列表
    toProduct(id) {
      this.$router.push({
        path: '/productList',
        query: { sid: id }
      })
    },
  },
  computed: {
    // 商品分类
    categoryItem() {
      return this.categoryList[this.activeKey]?.children
    },
  }
}
</script>
<style lang="scss" scoped>
.category {
  padding: 10px;
  min-height: calc(100vh - 70px);
  background-color: #fff;
  .content {
    display: flex;
    .navBox {
      flex: 1;
      padding: 20px;
      .navImg {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        overflow: hidden;
      }
    }
  }
}
.van-sidebar .van-sidebar-item {
  background-color: #fff;
  border-bottom: 1px solid #f6f6f6;
}
</style>